<template>
  <view class="quick-bank-bind">
    <!-- 顶部标题 -->
    <view class="header">
      <image class="logo" src="/static/images/huifubao-logo.png" mode="aspectFit"></image>
      <view class="divider"></view>
      <view class="title">
        <view class="title-cn">快速签约</view>
        <view class="title-en">Quick signing</view>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 提示框 -->
      <view class="tip-bar">
        <text class="tip-icon">!</text>
        <text class="tip-text">请填写并开通快捷支付等功能</text>
      </view>
      <!-- 卡类型 -->
      <view class="form-item">
        <text class="label required">卡类型</text>
        <view class="value">储蓄卡</view>
      </view>

      <!-- 银行卡号 -->
      <view class="form-item">
        <text class="label required">银行卡号</text>
        <input 
          v-model="formData.cardNo" 
          type="number" 
          placeholder="请输入银行卡号" 
          maxlength="23"
          @input="formatCardNumber"
          class="input"
        />
      </view>
      <!-- 显示银行信息 -->
      <view class="form-item bank-info-wrapper" v-if="bankInfo.name">
        <text class="label"></text>
        <view class="bank-info">
          <text class="bank-name">{{ bankInfo.name }}</text>
          <text class="bank-type">{{ bankInfo.type }}</text>
        </view>
      </view>

      <!-- 姓名 -->
      <view class="form-item">
        <text class="label required">姓名</text>
        <input 
          v-model="formData.name" 
          type="text" 
          placeholder="请输入姓名" 
          class="input"
        />
      </view>

      <!-- 身份证 -->
      <view class="form-item">
        <text class="label required">身份证</text>
        <input 
          v-model="formData.idCard" 
          type="idcard" 
          placeholder="请输入身份证号" 
          maxlength="18"
          class="input"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <text class="label required">手机号</text>
        <input 
          v-model="formData.phone" 
          type="number" 
          placeholder="请输入银行预留手机号" 
          maxlength="11"
          class="input"
        />
      </view>

      <!-- 验证码 -->
      <view class="form-item">
        <text class="label required">验证码</text>
        <input
          v-model="formData.verifyCode"
          type="number"
          placeholder="请输入验证码"
          maxlength="6"
          class="input verify-input"
        />
        <button
            class="send-code-btn"
            :class="{'disabled': countdown > 0}"
            :disabled="countdown > 0"
            @click="sendVerifyCode"
        >
          {{ countdown > 0 ? `${countdown}s后重试` : '发送验证码' }}
        </button>
      </view>
      <!-- 协议勾选 -->
      <view class="agreement">
        <checkbox-group @change="handleAgreeChange">
          <label class="agreement-label">
            <checkbox :checked="agreed" color="#FF6B00" style="transform:scale(0.7)" />
            <text class="agreement-text">
              我已阅读并同意<text class="link">《汇付宝快捷支付服务协议》</text>、
              <text class="link">《汇付宝隐私权政策》</text>、
              <text class="link">《扣款授权协议》</text>、
              <text class="link">《中国建设银行总对总快捷客户授权协议》</text>
            </text>
          </label>
        </checkbox-group>
      </view>

      <!-- 提交按钮 -->
      <button
          class="submit-btn"
          :class="{'disabled': !canSubmit}"
          :disabled="!canSubmit"
          @click="handleSubmit"
      >
        同意协议并确定
      </button>

      <!-- 底部提示 -->
      <view class="bottom-tip">
        <view class="tip-bar-blue">
          <text class="tip-icon">!</text>
          <text class="tip-text">推荐</text>
          <text class="link">免输入卡号，快速绑定</text>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        cardNo: '6222 0212 3456 7890 123',  // 中国工商银行借记卡
        name: '张三',
        idCard: '110101199001011234',
        phone: '13800138000',
        verifyCode: '123456'
      },
      bankName: '',
      bankInfo: {
        name: '',
        type: ''
      },
      // 银行卡BIN号识别规则
      bankCardBins: [
        { name: '中国建设银行', bin: '6227', type: '储蓄卡' },
        { name: '中国建设银行', bin: '4367', type: '储蓄卡' },
        { name: '中国工商银行', bin: '6222', type: '储蓄卡' },
        { name: '中国工商银行', bin: '9558', type: '储蓄卡' },
        { name: '中国银行', bin: '4563', type: '储蓄卡' },
        { name: '中国银行', bin: '6227', type: '储蓄卡' },
        { name: '中国农业银行', bin: '6228', type: '储蓄卡' },
        { name: '中国农业银行', bin: '9559', type: '储蓄卡' },
        { name: '交通银行', bin: '6222', type: '储蓄卡' },
        { name: '招商银行', bin: '6225', type: '储蓄卡' },
        { name: '招商银行', bin: '6226', type: '储蓄卡' },
        { name: '中信银行', bin: '6226', type: '储蓄卡' },
        { name: '光大银行', bin: '6226', type: '储蓄卡' },
        { name: '民生银行', bin: '6226', type: '储蓄卡' },
        { name: '广发银行', bin: '6225', type: '储蓄卡' },
        { name: '浦发银行', bin: '6225', type: '储蓄卡' },
        { name: '兴业银行', bin: '6229', type: '储蓄卡' },
        { name: '平安银行', bin: '6229', type: '储蓄卡' },
        { name: '邮政储蓄银行', bin: '6221', type: '储蓄卡' },
        { name: '华夏银行', bin: '6226', type: '储蓄卡' }
      ],
      agreed: false,
      countdown: 0,
      timer: null
    }
  },
  computed: {
    canSubmit() {
      return (
        this.formData.cardNo &&
        this.formData.name &&
        this.formData.idCard &&
        this.formData.phone &&
        this.formData.verifyCode &&
        this.agreed
      )
    }
  },
  onLoad() {
    this.detectBank(this.formData.cardNo);
  },
  methods: {
    // 根据卡号识别银行
    detectBank(cardNo) {
      if (!cardNo) {
        this.bankInfo = { name: '', type: '' };
        return;
      }
      
      // 移除所有空格
      const cardNum = cardNo.replace(/\s/g, '');
      
      if (cardNum.length < 4) {
        this.bankInfo = { name: '', type: '' };
        return;
      }
      
      // 获取卡号前6位作为BIN号
      const bin = cardNum.substring(0, 6);

      // 在BIN号列表中查找匹配的银行
      const matchedBank = this.bankCardBins.find(item => bin.startsWith(item.bin));
      
      if (matchedBank) {
        this.bankInfo = {
          name: matchedBank.name,
          type: matchedBank.type
        };
      } else {
        this.bankInfo = { name: '未知银行', type: '储蓄卡' };
      }
    },
    
    // 格式化银行卡号并检测银行
    formatCardNumber() {
      // 移除所有非数字字符
      let value = this.formData.cardNo.replace(/\D/g, '');
      
      // 检测银行
      if (value.length >= 4) {
        this.detectBank(value);
      } else {
        this.bankInfo = { name: '', type: '' };
      }
      
      // 每4位加一个空格
      value = value.replace(/(\d{4})(?=\d)/g, '$1 ');
      
      // 更新v-model
      this.$nextTick(() => {
        this.formData.cardNo = value.trim();
      });
    },
    
    // 发送验证码
    sendVerifyCode() {
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      
      // 这里调用发送验证码的API
      console.log('发送验证码到:', this.formData.phone)
      
      // 开始倒计时
      this.countdown = 60
      this.timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          return
        }
        this.countdown--
      }, 1000)
      
      // 模拟API调用
      uni.showLoading({ title: '发送中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '验证码已发送', icon: 'none' })
      }, 1000)
    },
    
    // 协议勾选状态改变
    handleAgreeChange(e) {
      this.agreed = e.detail.value.length > 0
    },
    
    // 提交表单
    handleSubmit() {
      if (!this.validateForm()) return
      
      uni.showLoading({ title: '提交中...' })
      
      // 这里调用绑卡API
      console.log('提交绑卡信息:', this.formData)
      
      // 模拟API调用
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '绑卡成功',
          icon: 'success',
          success: () => {
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        })
      }, 1500)
    },
    
    // 验证表单
    validateForm() {
      if (!this.formData.cardNo) {
        uni.showToast({ title: '请输入银行卡号', icon: 'none' })
        return false
      }
      
      if (!this.formData.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return false
      }
      
      if (!/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(this.formData.idCard)) {
        uni.showToast({ title: '请输入正确的身份证号', icon: 'none' })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return false
      }
      
      if (!this.formData.verifyCode) {
        uni.showToast({ title: '请输入验证码', icon: 'none' })
        return false
      }
      
      if (!this.agreed) {
        uni.showToast({ title: '请先阅读并同意相关协议', icon: 'none' })
        return false
      }
      
      return true
    }
  },
  
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.quick-bank-bind {
  background-color: rgba(244, 118, 118, 0.1);
  padding: 30rpx;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .logo {
    width: 120rpx;
    height: 60rpx;
  }
  
  .divider {
    width: 1px;
    height: 50rpx;
    background-color: #999999;
    margin: 0 30rpx;
  }
  
  .title {
    .title-cn {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      line-height: 1.4;
    }

    .title-en {
      font-size: 20rpx;
      color: #999;
      line-height: 1.2;
    }
  }
}

.tip-bar {
  background-color: rgba(255, 68, 0, 0.06);
  border-radius: 8rpx;
  padding: 20rpx 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32rpx;
    height: 32rpx;
    background-color: #FF4400;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    border-radius: 50%;
    margin-right: 16rpx;
  }
  
  .tip-text {
    font-size: 24rpx;
    color: #FF4400;
  }
}

.form-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx 40rpx;
  margin-bottom: 40rpx;
}

.form-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 120rpx;
  border-bottom: 1rpx solid #F0F0F0;

  &:last-child {
    border-bottom: none;
  }

  .label {
    width: 160rpx;
    font-size: 28rpx;
    color: #333;

    &.required::before {
      content: '*';
      color: #FF3B30;
      margin-right: 4rpx;
    }
  }

  .value {
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }

  .input {
    flex: 1;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    color: #333;
    border: 1px solid #999999;
    border-radius: 8rpx;
    padding: 10rpx 20rpx;
    box-sizing: content-box; /* 修改为 content-box */

    &::placeholder {
      color: #999;
      line-height: 1.2;
    }
  }

  .bank-info {
    width: 100%;
    padding: 0 30rpx 20rpx;
    display: flex;
    align-items: center;

    .bank-name {
      font-size: 24rpx;
      color: #666;
      margin-right: 20rpx;
      background-color: #f5f5f5;
      border-radius: 4px;
      margin: 0;
      display: flex;
      align-items: center;
      height: 100%;

      .bank-name {
        color: #333;
        margin-right: 10px;
      }

      .bank-type {
        color: #666;
        font-size: 12px;
      }
    }
  }

  .verify-input {

  }

  .send-code-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8rpx 20rpx;
    background: rgba(255, 0, 0, 0.1);
    color: #ff0000;
    font-size: 24rpx;
    border-radius: 5rpx;
    border: 1rpx solid #ff0000;
    margin-left: 10rpx;

    &::after {
      border: none;
    }

    &.disabled {
      background: #CCCCCC;
      color: #999;
    }
  }
}

.agreement {
  margin-bottom: 60rpx;
  
  .agreement-label {
    display: flex;
    align-items: flex-start;
  }
  
  .agreement-text {
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
  }
  
  .link {
    color: #ff0000;
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #FF6B00;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 40rpx;
  
  &::after {
    border: none;
  }
  
  &.disabled {
    background: #FFC7A7;
    color: #fff;
  }
}

.bottom-tip {
  display: flex;
  justify-content: center;
  .tip-bar-blue {
    border-radius: 8rpx;
    padding: 20rpx 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .tip-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32rpx;
      height: 32rpx;
      background-color: rgba(0, 122, 255, 0.8);
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
      border-radius: 50%;
    }

    .tip-text {
      font-size: 24rpx;
      color: #007AFF;
    }
  }
  .link {
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #999999;
  }
}
</style>
